<template>
  <div>

  </div>
</template>

<script>

import * as maptalks from 'maptalks';

export default {
  name: 'ctMapLink',
  components: {},
  props: {
    from: {
      type: Array,
      default() {
        return [];
      },
    },
    to: {
      type: Array,
      default() {
        return [];
      },
    },
    linkSymbol: {},
    lineType: {
      type: String,
      default: null
    },
  },
  data: () => ({
    parentMap: null,
  }),
  created() {
  },
  mounted() {
    const vue = this;
    this.$nextTick(() => {
      const {firstLayer} = this.$parent;
      if (this.lineType === 'arc') {
        vue.arc(firstLayer);
      } else {
        const pointGroup = [this.from, this.to];
        vue.doRender(pointGroup, firstLayer);
      }
    });
  },
  methods: {
    createLineStringObj(pointGroup) {
      const zz = new maptalks.LineString([
        pointGroup[0],
        pointGroup[1],
      ], {
        arcDegree: 90,
        arrowStyle: null, // arrow-style : now we only have classic
        arrowPlacement: 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
        visible: true,
        editable: true,
        cursor: null,
        shadowBlur: 0,
        shadowColor: 'black',
        draggable: false,
        dragShadow: false, // display a shadow during dragging
        drawOnAxis: null, // force dragging stick on a axis, can be: x, y
      });
      if (this.linkSymbol) {
        zz.setSymbol(this.linkSymbol);
      }
      return zz;
    },
    doRender(pointGroup, layer) {
      const LineStringObj = this.createLineStringObj(pointGroup);
      LineStringObj.addTo(layer);
    },
    arc(layer) {
      const p1 = new maptalks.Marker(this.from);
      const p2 = new maptalks.Marker(this.to);
      p1.setSymbol({});
      p2.setSymbol({});
      const src2 = p1.copy()
        .translate(0, -0.01);
      const dst2 = p2.copy()
        .translate(0, -0.01);
      const zz = new maptalks.ArcConnectorLine(src2, dst2, {
        arcDegree: 90,
        showOn: 'always',
      });
      if (this.linkSymbol) {
        zz.setSymbol(this.linkSymbol);
      }
      layer.addGeometry(src2, dst2, zz);
    },
  },
};
</script>

